<template>
	<view class="tab-bar" @touchmove.stop.prevent="()=>{}">
		<scroll-view class="noScorll bar-view" scroll-x scroll-with-animation :scroll-left="scrollLeft">
			<view class="bar-item" :style="{width: `${itemWidth}px`}" :class="{current: index === value}"
				v-for="(item, index) in tabs" :key="index"
				@click="changeTab(index)"
				>
				{{item.name}}
			</view>
		</scroll-view>
		<!-- </view> -->
	</view>
</template>

<script>
	// 定时器变量，用于控制滚动延迟
	let scorllTimer = null

	export default {
		props: {
			
			value: {
				type: Number,  
				default: 0    
			},
			tabs: {
				type: Array,   
				default: () => [
					{
						id: 1,      
						name: '课程'
					},
					{
						id: 2,      
						name: '文章' 
					},
					{
						id: 3,     
						name: '问答'
					}
				]
			}
		},

		data() {
			return {
				scrollLeft: 0, // 计算左右移动距离
				windownWidth: uni.getSystemInfoSync().windowWidth ,// 屏幕宽度 px
				itemWidth: uni.upx2px(150) 
			}
		},

		watch: {
			tabs: {
				handler(newVal) {
					// 监听标签选项数组，小于5个，平均分配每个的宽度
					if(newVal && newVal.length<5) {
						this.itemWidth = this.windownWidth/newVal.length
					}
				},
				immediate: true 
			}
		},

		methods: {
			/* changeTab(index) {
				// console.log('index', index)
				//改变tab, 点击不同的标签，才更新值
				if(this.value != index) {
					//this.value = index
					this.$emit('input', index)
				}
			}, */

			// 切换标签选项
			changeTab(index) {
				// 如果存在定时器，则清除之前的定时器
				if(scorllTimer) {
					// 多次切换只执行最后一次
					clearTimeout(scorllTimer)
					scorllTimer = null
				}

				// 获取点击项距离左侧的宽度
				let width = this.itemWidth * (index+1)
				// console.log('width', width)
				scorllTimer = setTimeout(() => {
					// 点击的这个距离>屏幕1/2（中间）则移动到中间
					if(width - this.itemWidth/2 > this.windownWidth/2) {
						// 计算滚动距离，使选中项居中显示
						this.scrollLeft = width - this.itemWidth/2 - this.windownWidth/2
					}else {
						// 滚动距离为0
						this.scrollLeft = 0
					}

					/* this.value = index */
					this.$emit('input', index)
				}, 400)
			}
		}
	}
</script>

<style lang="scss">
	/* 标签栏样式 */
	.tab-bar {
		width: 100%;                    // 宽度100%
		height: 80rpx;                  // 高度
		background-color: #FFFFFF;      // 背景颜色
		border-bottom: 1px solid #efeff4; // 底部边框

		/* 标签视图样式 */
		.bar-view {
			width: 100%;                // 宽度
			text-align: center;         // 文本居中
			/* +++ */
			white-space: nowrap;        // 不换行

			/* 标签项样式 */
			.bar-item {
				/* flex: 1; */
				display: inline-block;   // 行内块元素
				width: 150rpx;           // 宽度

				font-size: 30rpx;        // 字体大小
				line-height: 80rpx;      // 行高
				position: relative;      // 相对定位

				// 选中指示器样式
				&:after {
					position: absolute;   // 绝对定位
					content: '';          // 内容为空
					width: 0;             // 宽度
					height: 0;            // 高度
					border-bottom: 6rpx solid $mxg-text-color-blue; // 蓝色下边框
					border-radius: 20rpx; // 圆角
					left: 50%;            // 左边距离50%
					bottom: 6rpx;         // 底部距离
					transform: translateX(-50%); // 水平居中
					transition: .3s;      // 过渡动画
				}
			}

			/* 当前选中标签样式 */
			.current {
				color: $mxg-text-color-blue; // 蓝色文字
				&:after {
					width: 60rpx;         // 指示器宽度
				}
			}
		}
	}
</style>
